<template>
  <div class="w-screen h-screen relative bg-[#f9f9fc] overflow-hidden">
    <SideMenu v-model="isCollapse"></SideMenu>
    <div
      class="h-full py-4 pr-4 pl-0 absolute top-0 right-0 transition-all duration-300 ease-in-out main-content"
      :class="{ 'is-collapse': isCollapse }"
    >
      <div
        class="h-full bg-white overflow-auto relative rounded-[10px] border border-solid border-[#e9e9f1] content-box"
      >
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SideMenu from '@/components/SideMenu.vue'

const isCollapse = ref(true)
</script>

<style lang="scss" scoped>
// 保留需要通过 :class 实现的动态样式
.main-content {
  width: calc(100% - 228px);

  &.is-collapse {
    width: calc(100% - 72px);
  }
}

.content-box {
  box-shadow:
    0px 2px 4px -2px rgba(16, 24, 40, 0.02),
    0px 4px 8px -2px rgba(16, 24, 40, 0.02);
}
</style>
